函数重载

1. 概述

函数重载（Function Overloading）是 TypeScript 中一个强大的特性，它允许你定义多个同名函数，但这些函数的参数类型或数量不同。通过函数重载，你可以为不同的输入提供不同的实现，从而提高代码的可读性和灵活性。

2. 为什么需要函数重载？

在实际开发中，你可能需要处理不同类型的输入数据，并根据输入类型执行不同的操作。例如，你可能需要一个函数来处理数字和字符串类型的输入，并返回不同的结果。函数重载可以帮助你优雅地处理这种情况。

3. 函数重载的基本语法

在 TypeScript 中，函数重载的基本语法如下：

function 函数名(参数1: 类型1): 返回类型1;
function 函数名(参数2: 类型2): 返回类型2;
function 函数名(参数3: 类型3): 返回类型3;
function 函数名(参数: 类型): 返回类型 {
    // 实际的函数实现
}

3.1 示例：处理不同类型的输入

假设我们有一个函数 processInput，它可以处理数字和字符串类型的输入，并返回不同的结果。

function processInput(value: number): string;
function processInput(value: string): number;
function processInput(value: number | string): string | number {
    if (typeof value === 'number') {
        return `The number is: ${value}`;
    } else {
        return value.length;
    }
}

// 使用函数
console.log(processInput(10)); // 输出: "The number is: 10"
console.log(processInput("Hello")); // 输出: 5

在这个示例中，我们定义了两个重载函数签名：一个用于处理数字输入，另一个用于处理字符串输入。实际的函数实现部分则根据输入类型执行不同的逻辑。

4. 函数重载的注意事项

4.1 重载签名与实现签名

在函数重载中，重载签名（Overload Signatures）是指定义函数的多个签名，而实现签名（Implementation Signature）是指实际的函数实现。实现签名必须兼容所有的重载签名。

function add(a: number, b: number): number; // 重载签名
function add(a: string, b: string): string; // 重载签名
function add(a: any, b: any): any { // 实现签名
    return a + b;
}

4.2 重载签名的顺序

重载签名的顺序很重要。TypeScript 会从上到下匹配重载签名，因此你应该将最具体的签名放在最前面，最通用的签名放在最后面。

function greet(name: string): string;
function greet(name: string, age: number): string;
function greet(name: string, age?: number): string {
    if (age) {
        return `Hello, ${name}! You are ${age} years old.`;
    } else {
        return `Hello, ${name}!`;
    }
}

在这个示例中，greet 函数有两个重载签名：一个接受一个参数，另一个接受两个参数。TypeScript 会先匹配第一个签名，如果匹配失败，再匹配第二个签名。

5. 实践练习

5.1 练习：计算面积

编写一个函数 calculateArea，它可以计算矩形和圆形的面积。矩形的面积通过传入长和宽计算，圆形的面积通过传入半径计算。

function calculateArea(length: number, width: number): number;
function calculateArea(radius: number): number;
function calculateArea(value1: number, value2?: number): number {
    if (value2 !== undefined) {
        return value1 * value2; // 计算矩形的面积
    } else {
        return Math.PI * value1 * value1; // 计算圆形的面积
    }
}

// 使用函数
console.log(calculateArea(5, 10)); // 输出: 50
console.log(calculateArea(7)); // 输出: 153.93804002589985

5.2 练习：格式化输出

编写一个函数 formatOutput，它可以格式化数字和字符串类型的输入。如果输入是数字，将其转换为字符串并添加前缀 "Number: "；如果输入是字符串，将其转换为大写。

function formatOutput(value: number): string;
function formatOutput(value: string): string;
function formatOutput(value: number | string): string {
    if (typeof value === 'number') {
        return `Number: ${value}`;
    } else {
        return value.toUpperCase();
    }
}

// 使用函数
console.log(formatOutput(123)); // 输出: "Number: 123"
console.log(formatOutput("hello")); // 输出: "HELLO"

6. 总结

函数重载是 TypeScript 中一个非常有用的特性，它允许你为不同的输入提供不同的实现。通过合理使用函数重载，你可以提高代码的可读性和灵活性。希望本教程能帮助你更好地理解和应用函数重载。

7. 下一步

接下来，你可以继续学习 TypeScript 中的其他高级特性，如泛型、接口、类等。这些特性将帮助你构建更复杂和强大的 TypeScript 应用程序。